<extend name="Layout/application"/>

<block name="css">
    <link rel="stylesheet" href="__PUBLIC__/select2/css/select2.min.css">

    <link rel="stylesheet" href="__PUBLIC__/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">


    <link rel="stylesheet" href="__PUBLIC__/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">

</block>

<block name="content">
    <div class="row">
        <div class="col-md-12">

            <div class="row">
                <div class="col-md-8">
                    <div class="page-header">
                        <h1>文章列表</h1>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-10">
                    <div class="panel panel-default">
                        <div class="panel-heading">文章列表</div>

                        <div class="panel-body">
                            <form class="form-horizontal" role="form" method="post" action="{{:U('store_article')}}">
                                <div class="form-group">
                                    <label for="category" class="col-sm-2 control-label">所属栏目</label>
                                    <div class="col-sm-10">
                                        <select name="category_id" id="category" class="form-control">
                                            <volist name="categories" id="category">
                                            <option value="{{$category.id}}">{{$category.name}}</option>
                                                <volist name="category.children" id="c">
                                                    <option value="{{$c.id}}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$c.name}}</option>
                                                </volist>
                                            </volist>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="title" class="col-sm-2 control-label">标题</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="title" class="form-control" id="title" placeholder="">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="color" class="col-sm-2 control-label">颜色选择</label>
                                    <div class="col-sm-10">

                                        <div id="cp2" class="input-group colorpicker-component">
                                            <input type="text" name="color" id="color" value="#00AABB" class="form-control"/>
                                            <span class="input-group-addon"><i></i></span>
                                        </div>
                                    </div>
                                </div>


                                <div class="form-group">
                                    <label for="time" class="col-sm-2 control-label">发布日期</label>
                                    <div class="col-sm-10">

                                        <input type="text" name="time" class="form-control" id="time" placeholder="">
                                    </div>
                                </div>


                                <div class="form-group">
                                    <label for="title" class="col-sm-2 control-label">缩略图</label>
                                    <div class="col-sm-6">
                                        <input type="text" name="thumb" class="form-control" id="thumb" placeholder="">
                                    </div>
                                    <div class="col-sm-4">
                                        <button type="button" class="btn btn-success"
                                                onclick="BrowseServer('thumb','img_show')">新增
                                        </button>

                                        <button type="button" class="btn btn-danger">删除</button>
                                    </div>
                                </div>


                                <div class="form-group">
                                    <label for="title" class="col-sm-2 control-label">预览</label>
                                    <div class="col-sm-10">
                                        <img src="" id="img_show" style="max-height: 120px;"/>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="content" class="col-sm-2 control-label">发布内容</label>
                                    <div class="col-sm-10">
                                        <textarea name="content" class="form-control" id="content" cols="30" rows="10"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-default">提交</button>
                                        <button type="button" class="btn btn-default" id="return">返回</button>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>


                <div class="col-md-2">
                    <div class="list-group">

                    </div>
                </div>
            </div>
        </div>
    </div>
</block>
<block name="js">

    <script src="__PUBLIC__/ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="__PUBLIC__/ckfinder/ckfinder.js"></script>


    <script src="__PUBLIC__/select2/js/select2.min.js"></script>
    <script src="__PUBLIC__/select2/js/i18n/zh-CN.js"></script>

    <script src="__PUBLIC__/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>


    <script src="__PUBLIC__/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="__PUBLIC__/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <script>
        CKEDITOR.replace('content',
                {
                    filebrowserBrowseUrl: '__PUBLIC__/ckfinder/ckfinder.html',
                    filebrowserImageBrowseUrl: '__PUBLIC__/ckfinder/ckfinder.html?type=Images',
                    filebrowserFlashBrowseUrl: '__PUBLIC__/ckfinder/ckfinder.html?type=Flash',
                    filebrowserUploadUrl: '__PUBLIC__/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
                    filebrowserImageUploadUrl: '__PUBLIC__/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
                    filebrowserFlashUploadUrl: '__PUBLIC__/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
                });


        //上传图片
        function BrowseServer(thumb, img_show) {
            var finder = new CKFinder();

            //当选中图片时执行的函数
            finder.selectActionFunction = function (fileUrl) {
                $("#" + thumb).val(fileUrl);
                $("#" + img_show).attr("src", "" + fileUrl + "");
            }

            finder.popup();//调用窗口
        }


        $(function () {
            $('select').select2();

            $('#cp2').colorpicker();


            $('#time').datepicker({
                format: "yyyy-mm-dd",
                language: 'zh-CN'
            });


            $('#return').click(function () {
                window.history.back(-1);
            })

        })
    </script>
</block>